<template>
  <div class="track-container">
    <!-- 悬浮查询按钮 -->
    <!--    <div class="floating-query-btn" :class="{ collapsed: headerCollapsed }">-->
    <!--      <el-button-->
    <!--        :icon="headerCollapsed ? 'Search' : 'Close'"-->
    <!--        @click="headerCollapsed = !headerCollapsed"-->
    <!--        circle-->
    <!--        type="primary"-->
    <!--        size="large"-->
    <!--      />-->
    <!--    </div>-->

    <!-- 查询面板 -->
    <div class="query-panel" :class="{ show: !headerCollapsed }">
      <el-row :gutter="10" style="height: 50px; align-items: center">
        <el-col :span="4">
          <div style="display: flex; padding-left: 20px">
            <div style="font-size: 14px; font-weight: bold">轨迹回放</div>
            <div
              v-if="isIMEI"
              style="font-size: 12px; display: flex; align-items: center; padding-left: 20px"
            >
              <div style="color: #23c343"><strong>汉兰达 ( IMEI：868120310117970 )</strong></div>
            </div>
            <div v-else v-if="!isIMEI" style="padding-left: 20px">
              <el-input
                v-model="queryForm.imei"
                placeholder="请输入IMEI或设备名称"
                size="small"
              ></el-input>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div style="display: flex">
            <div>
              <el-select size="small" style="width: 80px">
                <el-option :value="1" label="上周">上周</el-option>
                <el-option :value="2" label="本周">本周</el-option>
                <el-option :value="3" label="前天">前天</el-option>
                <el-option :value="4" label="昨天">昨天</el-option>
                <el-option :value="5" label="今天">今天</el-option>
                <el-option :value="6" label="最近七天">最近七天</el-option>
                <el-option :value="7" label="自定义">自定义</el-option>
              </el-select>
            </div>
            <div style="padding-left: 10px">
              <el-date-picker
                style="width: 400px"
                type="datetimerange"
                size="small"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              ></el-date-picker>
            </div>

            <div style="padding-left: 10px">
              <el-button size="small" type="primary">查询</el-button>
            </div>
            <div style="padding-left: 10px">
              <el-button size="small">重置</el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="4" style="display: flex; justify-content: end; padding-right: 20px">
          <el-button size="small" plain type="success">实时跟踪</el-button>
          <el-button size="small" plain type="success" @click="q3d">切换3D地图</el-button>
        </el-col>
      </el-row>

      <!--        <div class="info-row">-->
      <!--          <div class="query-left">-->
      <!--            <div class="track-info">-->
      <!--              <h5>轨迹回放</h5>-->

      <!--&lt;!&ndash;              <div class="notice">&ndash;&gt;-->
      <!--&lt;!&ndash;                <p>温馨提示：该设备未购买增值服务，现有回放延长存储6个月，如需变更，请立即购买</p>&ndash;&gt;-->
      <!--&lt;!&ndash;                <el-button type="warning" size="small">购买</el-button>&ndash;&gt;-->
      <!--&lt;!&ndash;              </div>&ndash;&gt;-->
      <!--            </div>-->
      <!--          </div>-->

      <!--          <div class="query-right">-->
      <!--            <el-button type="primary" size="small">实时跟踪</el-button>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
    </div>
    <div
      style="
        position: absolute;
        top: 50px;
        z-index: 998;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
      "
    >
      <div
        style="
          width: 80%;
          bottom: -20px;
          padding: 12px 36px;
          border: 1px solid #ddd;
          border-top: 0;
          background-color: white;
          -webkit-border-radius: 0 0 50px 50px;
          -webkit-box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3);
          -moz-border-radius: 0 0 50px 50px;
          border-radius: 0 0 50px 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        "
      >
        <div style="display: flex; align-items: center">
          <div>
            <el-button
              icon="CaretRight"
              size="default"
              circle
              type="primary"
              @click="startAnimation()"
            />
          </div>

          <div style="padding-left: 10px">
            <el-slider
              v-model="playProgress"
              size="small"
              :max="100"
              style="width: 250px; margin: 0 10px"
              @change="onProgressChange"
            />
            <div
              style="
                display: flex;
                font-size: 12px;
                justify-content: space-between;
                width: 100%;
                align-items: center;
              "
            >
              <div>2025-8-25 17:32:08</div>

              <el-slider
                size="small"
                :model-value="2"
                :max="5"
                style="width: 100px; margin: 0 10px"
                @change="onProgressChange"
              />
            </div>
          </div>
          <div>
            <el-button icon="RefreshRight" @click="resetTrack"></el-button>
          </div>
        </div>

        <div style="padding-left: 20px">
          <el-checkbox>显示经过围栏</el-checkbox>
        </div>
        <div style="padding-left: 20px">
          <el-text>总里程：13.04 km 速度：21KM/H</el-text>
        </div>
        <div style="display: flex; padding-left: 20px; justify-content: space-between">
          <div>
            <el-text>
              <el-icon color="#409EFF">
                <Location />
              </el-icon>
              卫星
            </el-text>
          </div>
          <div>
            <el-text>
              <el-icon color="#E6A23C">
                <Location />
              </el-icon>
              基站
            </el-text>
          </div>
          <div>
            <el-text>
              <el-icon color="#67C23A">
                <Location />
              </el-icon>
              WIFI
            </el-text>
          </div>
        </div>
      </div>
    </div>

    <!-- 轨迹列表区域 -->
    <div
      class="track-panel"
      :class="{ hidden: trackPanelHidden, resizing: isResizing }"
      :style="{ height: trackPanelHeight + 'px' }"
    >
      <el-card class="track-card">
        <template #header>
          <div class="card-header">
            <span class="title">轨迹点列表</span>
            <div class="controls">
              <el-button icon="Close" size="small" circle @click="hideTrackPanel" />
            </div>
          </div>
        </template>
        <div class="track-list">
          <el-table :data="trackList" :height="trackPanelHeight - 80" stripe>
            <el-table-column prop="index" label="序号" width="80" />
            <el-table-column prop="time" label="时间" />
            <el-table-column prop="lng" label="经度" />
            <el-table-column prop="lat" label="纬度" />
            <el-table-column prop="position" label="位置信息" show-overflow-tooltip width="220" />
            <el-table-column prop="speed" label="速度(km/h)" />
            <el-table-column prop="direction" label="方向角度" />
            <el-table-column prop="mileage" label="里程(km)" width="80" />
            <el-table-column prop="altitude" label="海拔(m)" width="80" />
            <el-table-column prop="acc" label="ACC状态" width="100" />
            <el-table-column prop="warn" label="报警信息" show-overflow-tooltip />
            <el-table-column prop="battery" label="电池电量" />
            <el-table-column prop="signal" label="信号强度" />
          </el-table>
        </div>
      </el-card>
      <div class="resize-handle" @mousedown="startResize"></div>
    </div>

    <!-- 地图区域 -->
    <div class="map-container">
      <div id="allmap" ref="mapContainer"></div>
    </div>

    <!-- 悬浮显示按钮 -->
    <div v-show="trackPanelHidden" class="floating-btn" @click="showTrackPanel">
      <el-button type="primary" icon="List" circle />
    </div>
  </div>
</template>
<script setup>
import { computed, onBeforeUnmount, onMounted, ref, watch } from "vue";
import { Location } from "@element-plus/icons-vue";

const router = useRouter();
// 响应式数据
const mapContainer = ref(null);
const lushu = ref(null);
const pl = ref();
const trackAni = ref();
// 从trackList中提取经纬度数据作为轨迹路径
const path = computed(() => {
  return trackList.value.map((item) => ({
    lng: item.lng,
    lat: item.lat,
  }));
});

const isIMEI = ref(false);
const trackPanelHidden = ref(false);
const playProgress = ref(0); // 播放进度
const trackPanelHeight = ref(300); // 轨迹面板高度
const isResizing = ref(false); // 是否正在调整大小
const headerCollapsed = ref(false); // 头部是否折叠
const queryForm = ref({ imei: "" }); // 查询表单
const trackList = ref([
  {
    index: 1,
    time: "2025-08-26 16:27:03",
    lng: 119.43185515441223,
    lat: 35.99974558101032,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,电脑办公设备东南96米",
    speed: 0,
    direction: "正北",
    mileage: 0,
    altitude: 139,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 25,
  },
  {
    index: 2,
    time: "2025-08-26 16:27:47",
    lng: 119.43169239948976,
    lat: 35.99965550347208,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,电脑办公设备东南92米",
    speed: 0,
    direction: "正北",
    mileage: 0,
    altitude: 147,
    acc: 3,
    warn: "正常",
    battery: "开",
    signal: 22,
  },
  {
    index: 3,
    time: "行驶中",
    lng: 119.43156260695822,
    lat: 35.99965946012596,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,万家共享(东武街店)附近15米",
    speed: 5.9,
    direction: "东偏北3度",
    mileage: 0,
    altitude: 118,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 23,
  },
  {
    index: 4,
    time: "行驶中",
    lng: 119.43156260557568,
    lat: 35.99965145808463,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,万家共享(东武街店)附近15米",
    speed: 5,
    direction: "南偏东29度",
    mileage: 0,
    altitude: 119,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 23,
  },
  {
    index: 5,
    time: "行驶中",
    lng: 119.43131899608592,
    lat: 35.99968038019562,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,电脑办公设备南71米",
    speed: 5.9,
    direction: "西偏南38度",
    mileage: 0,
    altitude: 115,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 27,
  },
  {
    index: 6,
    time: "2025-08-26 16:28:42",
    lng: 119.43128603811085,
    lat: 35.99962335391429,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,电脑办公设备南78米",
    speed: 0,
    direction: "南偏东4度",
    mileage: 0,
    altitude: 107,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 27,
  },
  {
    index: 7,
    time: "行驶中",
    lng: 119.43138381284376,
    lat: 35.99921228372987,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,万家共享(东武街店)南71米",
    speed: 5.3,
    direction: "南偏东24度",
    mileage: 0.1,
    altitude: 91,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 31,
  },
  {
    index: 8,
    time: "2025-08-26 16:29:37",
    lng: 119.43144867498657,
    lat: 35.999008254437314,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,万家共享(东武街店)南99米",
    speed: 0,
    direction: "南偏东6度",
    mileage: 0.1,
    altitude: 84,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 29,
  },
  {
    index: 9,
    time: "2025-08-26 16:30:37",
    lng: 119.43141575942398,
    lat: 35.99919529063338,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,万家共享(东武街店)南73米",
    speed: 0,
    direction: "北偏东3度",
    mileage: 0.1,
    altitude: 85,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 31,
  },
  {
    index: 10,
    time: "行驶中",
    lng: 119.43144878956535,
    lat: 35.99967142366728,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,万家共享(东武街店)附近8米",
    speed: 6.1,
    direction: "东偏北7度",
    mileage: 0.2,
    altitude: 84,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 26,
  },
  {
    index: 11,
    time: "行驶中",
    lng: 119.43154663942661,
    lat: 35.999700465075335,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,电脑办公设备东南78米",
    speed: 5.7,
    direction: "正东北",
    mileage: 0.2,
    altitude: 85,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 21,
  },
  {
    index: 12,
    time: "2025-08-26 16:31:24",
    lng: 119.43156261335253,
    lat: 35.99969646956684,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,电脑办公设备东南79米",
    speed: 0,
    direction: "东偏北7度",
    mileage: 0.2,
    altitude: 85,
    acc: 2,
    warn: "正常",
    battery: "开",
    signal: 21,
  },
  {
    index: 13,
    time: "2025-08-26 16:32:41",
    lng: 119.43166045618125,
    lat: 35.999688501040595,
    position: "山东省潍坊市诸城市密州街道东郊街15号朝阳公馆内,电脑办公设备东南86米",
    speed: 0,
    direction: "东偏南36度",
    mileage: 0.2,
    altitude: 91,
    acc: 3,
    warn: "正常",
    battery: "开",
    signal: 21,
  },
]); // 轨迹列表数据

const hideTrackPanel = () => {
  trackPanelHidden.value = true;
};

const showTrackPanel = () => {
  trackPanelHidden.value = false;
};

// 还原拖拽拉伸逻辑
let startY = 0;
let startHeight = 0;
const MIN_HEIGHT = 200;
const MAX_HEIGHT = 600;

const onMouseMove = (e) => {
  const delta = e.clientY - startY;
  // handle 在 panel 顶部，向上拖动（delta < 0）应增大高度
  let newHeight = startHeight - delta;
  newHeight = Math.max(MIN_HEIGHT, Math.min(MAX_HEIGHT, newHeight));
  trackPanelHeight.value = newHeight;
};

const stopResize = () => {
  if (!isResizing.value) return;
  isResizing.value = false;
  document.body.classList.remove("resizing");
  window.removeEventListener("mousemove", onMouseMove);
  window.removeEventListener("mouseup", stopResize);
};

const startResize = (e) => {
  e.preventDefault();
  isResizing.value = true;
  document.body.classList.add("resizing");
  startY = e.clientY;
  startHeight = trackPanelHeight.value;
  window.addEventListener("mousemove", onMouseMove);
  window.addEventListener("mouseup", stopResize);
};

onBeforeUnmount(() => {
  stopResize();
});

// 全局变量（保持与 1.html 一致的作用域）
let trackData = [];
let colorOffset = [];
let trackRoad;
let movePoint;
let step = 0;
let ani;
let index = 0;
let finishIndex = 0;

function init() {
  const map = new BMapGL.Map("allmap", {
    style: "grayed-out",
    displayOptions: {
      indoor: false,
      poiText: false,
      poiIcon: false,
      building: false,
    },
  });
  // 使用trackList中的第一个点作为地图中心
  const pathData = path.value;
  if (pathData.length === 0) return; // 如果没有轨迹数据则返回

  var point = new BMapGL.Point(pathData[0].lng, pathData[0].lat);

  map.centerAndZoom(point, 18);
  map.enableScrollWheelZoom(true);
  map.setTilt(35);

  const track = new Track.View(map, {
    lineLayerOptions: {
      style: {
        strokeWeight: 8,
        strokeLineJoin: "round",
        strokeLineCap: "round",
      },
    },
  });

  // 重置数据并填充
  trackData = [];
  colorOffset = [];
  for (const item of pathData) {
    var point = new BMapGL.Point(item.lng, item.lat);
    const trackPoint = new Track.TrackPoint(point);
    trackData.push(trackPoint);
    const choose = [0.9, 0.5, 0.1];
    const color = choose[Math.floor(Math.random() * choose.length)];
    colorOffset.push(color);
  }
  const startMarker = new BMapGL.Marker(trackData[0].getPoint(), {
    icon: new BMapGL.Icon(
      "https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/start.png",
      new BMapGL.Size(25, 40)
    ),
    offset: new BMapGL.Size(0, -16),
  });
  map.addOverlay(startMarker);
  const endMarker = new BMapGL.Marker(trackData[trackData.length - 1].getPoint(), {
    icon: new BMapGL.Icon(
      "https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/end.png",
      new BMapGL.Size(25, 40)
    ),
    offset: new BMapGL.Size(0, -16),
  });
  map.addOverlay(endMarker);
  const duration = 60000;
  // 计算步长到外部变量
  if (trackData.length > 0) {
    step = duration / trackData.length;
  }

  trackRoad = new Track.LiveTrack({
    duration: step,
    linearTexture: [
      [0, "#f45e0c"],
      [0.5, "#f6cd0e"],
      [1, "#2ad61d"],
    ],
    guideStyle: {
      style: {
        traceDisappear: false,
        traceStart: true,
        sequence: true,
        marginLength: 32,
        arrowColor: "#fff",
        strokeColor: "rgb(0,95,255)",
        strokeTextureUrl: "https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/down.png",
        strokeTextureWidth: 64,
        strokeTextureHeight: 32,
      },
    },
  });

  trackRoad.setGuidTrackPath(trackData);
  trackRoad.on(Track.LineCodes.GUIDE_STATUS, (e) => {
    if (e.status === Track.GuidCodes.ADD_TO_MAP) {
      const guidTrack = trackRoad.getGuidTrack();
      guidTrack.on(Track.LineCodes.STATUS, (status) => {
        switch (status) {
          case Track.StatusCodes.FINISH:
            var box = trackRoad.getBBox();
            if (box) {
              const bounds = [new BMapGL.Point(box[0], box[1]), new BMapGL.Point(box[2], box[3])];
              map.setViewport(bounds);
            }
            break;
          default:
            break;
        }
      });
    }
  });
  movePoint = new Track.ModelPoint({
    point: trackData[0].getPoint(),
    style: {
      url: "https://mapopen-pub-jsapi.bj.bcebos.com/jsapiGlgeo/img/bus.glb",
      scale: 9,
      level: 18,
      rotationX: 90,
      rotationY: 90,
      rotationZ: 0,
    },
  });
  movePoint.setRotation(trackRoad.getGuidTrack().getStepInfoByIndex(0).angle);

  console.log(123, movePoint);

  trackRoad.setMovePoint(movePoint);

  track.addTrackLine(trackRoad);
  track.focusTrack(trackRoad);
}

onMounted(() => {
  init();
});

// 监听trackList变化，重新初始化地图轨迹
watch(
  trackList,
  () => {
    if (trackList.value.length > 0) {
      init();
    }
  },
  { deep: true }
);

let start = null;

function startAnimation(timestamp) {
  if (!start) start = timestamp;
  const progress = timestamp - start;
  const next = step * (index - finishIndex);

  if (progress > next) {
    if (index < trackData.length) {
      movePoint.moveTo(trackData[index]);
      const obj = trackRoad.getGuidTrack().getStepInfoByIndex(index);
      trackRoad.setGradientColors(colorOffset.slice(0, index + 1));
      index++;
    } else {
      pauseAnimation();
    }
  }
  ani = requestAnimationFrame(startAnimation);
}

function stopAnimation() {
  pauseAnimation();
  index = 0;
  finishIndex = index;

  start = null;
  trackRoad.clearTrackPoint();
  movePoint.setPoint(trackData[0].getPoint());
  movePoint.setRotation(trackRoad.getGuidTrack().getStepInfoByIndex(0).angle);
}

function pauseAnimation() {
  cancelAnimationFrame(ani);
  finishIndex = index;
  start = null;
}

function resumeAnimation() {
  startAnimation();
}

onMounted(() => {
  if (router.currentRoute.value.params.id) {
    isIMEI.value = true;
  } else {
    isIMEI.value = false;
  }
});
</script>

<style lang="scss" scoped>
// 全局样式 - 支持拖拽时的body样式
:global(body.resizing) {
  cursor: ns-resize !important;
  user-select: none !important;

  * {
    cursor: ns-resize !important;
    user-select: none !important;
  }
}

.track-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;

  // 悬浮查询按钮
  .floating-query-btn {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    transition: top 0.3s ease;

    &.collapsed {
      top: 20px;
    }

    .el-button {
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        filter: brightness(1.1);
      }
    }
  }

  // 查询面板
  .query-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #e9f0ff;
    box-shadow:
      inset 0 1px 0 #fff,
      0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e4e7ed;
    z-index: 1500;

    &.show {
      .query-row {
        transform: translateY(0);
      }
    }

    .query-content {
      padding: 0 20px;
      background-color: white;
      height: 40px;
      width: 100%;
    }

    .info-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
    }

    .query-left {
      flex: 0 0 auto;
      min-width: 300px;
      height: 40px;
      align-items: center;
    }

    .query-right {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 40px;
    }

    .query-row {
      background-color: white;
      padding: 10px 10px;
      border-top: 1px solid #e4e7ed;
      transition: all 0.3s ease;
      overflow: hidden;
      max-height: 200px;
      transform: translateY(-100%);

      &.collapsed {
        max-height: 0;
        opacity: 0;
        margin: 0;
        padding: 0;
        transform: translateY(-100%);
      }

      :deep(.el-form) {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px;

        .el-form-item {
          margin-bottom: 0;

          .el-form-item__label {
            font-weight: 500;
            color: #606266;
            white-space: nowrap;
          }
        }
      }
    }

    .track-info {
      display: flex;
      align-items: center;
      gap: 20px;
      height: 40px;
    }

    .vehicle-info {
      display: flex;
      align-items: center;
      gap: 15px;
      flex-shrink: 0;
    }

    .vehicle-info p {
      margin: 0;
      color: #666;
      font-size: 12px;
      white-space: nowrap;
    }

    .notice {
      //background: #fff3cd;
      //border: 1px solid #ffeaa7;
      border-radius: 4px;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1;
    }

    .notice p {
      margin: 0;
      color: #856404;
      font-size: 12px;
      line-height: 1.4;
      flex: 1;
    }
  }

  .map-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;

    #allmap {
      width: 100%;
      height: 100%;
    }
  }

  .track-panel {
    background: #fff;
    border-top: 1px solid #e4e7ed;
    transition: transform 0.3s ease;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    min-height: 200px;
    max-height: 600px;
    z-index: 999;
    will-change: height, transform;
    transform: translateZ(0);

    &.hidden {
      transform: translateY(100%) translateZ(0);
    }

    &.resizing {
      transition: none;
      user-select: none;

      * {
        user-select: none;
        pointer-events: none;
      }

      .resize-handle {
        pointer-events: auto;
      }
    }

    .resize-handle {
      height: 6px;
      background: #f5f7fa;
      cursor: ns-resize;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      will-change: background-color;
      transform: translateZ(0);
      transition: background-color 0.2s ease;

      &:hover {
        background: #e6f7ff;
      }

      &::after {
        content: "";
        width: 40px;
        height: 3px;
        background: #c0c4cc;
        border-radius: 2px;
      }
    }

    .track-card {
      height: calc(100% - 6px);
      border: none;
      border-radius: 0;

      :deep(.el-card__header) {
        padding: 12px 16px;
        border-bottom: 1px solid #e4e7ed;

        .card-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;

          .title {
            font-weight: 600;
            color: #303133;
            font-size: 16px;
          }

          .controls {
            display: flex;
            align-items: center;
            gap: 12px;

            .progress-container {
              display: flex;
              align-items: center;
              gap: 8px;

              .progress-text {
                font-size: 12px;
                color: #909399;
                min-width: 30px;
                text-align: center;
              }
            }
          }
        }
      }

      :deep(.el-card__body) {
        padding: 0;
        height: calc(100% - 60px);

        .track-list {
          height: 100%;

          .el-table {
            height: 100%;

            .el-table__body-wrapper {
              max-height: calc(100% - 40px);
            }
          }
        }
      }
    }
  }

  .floating-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 50%;
  }
}

// 全局样式覆盖
:deep(.el-date-editor) {
  width: 180px;
}

:deep(.el-input) {
  width: 160px;
}

:deep(.el-button-group) {
  .el-button {
    padding: 8px 12px;
  }
}

:deep(.el-slider) {
  .el-slider__runway {
    height: 4px;
  }

  .el-slider__button {
    width: 14px;
    height: 14px;
  }
}

:deep(.el-table) {
  .el-table__header {
    th {
      background-color: #fafafa;
      color: #606266;
      font-weight: 500;
    }
  }

  .el-table__row {
    &:hover {
      background-color: #f5f7fa;
    }
  }

  //.el-form-item .el-form-item--small .asterisk-left .el-form-item--label-right{
  //  height: 100%;
  //}
}
</style>
